<template>
    <view
        class="filter-bar"
        :class="[
            {
                'is-sticky': isSticky
            }
        ]"
    >
        <view class="filter-bar-sort">
            <view
                class="filter-bar-sort__field"
                v-for="(item, index) in fields"
                :key="index"
                :class="[
                    {
                        'is-active': item.value == prop
                    },
                    'filter-statis-' + type + '-' + index
                ]"
                @tap="changeOrder(item)"
            >
                <text class="filter-bar-sort__label">{{ item.label }}</text>

                <view
                    class="filter-bar-sort__order"
                    :class="[`is-${item.order}`]"
                    v-if="item.order !== undefined"
                >
                    <text class="filter-bar-sort__asc"></text>
                    <text class="filter-bar-sort__desc"></text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        // fields: Array
        isSticky: Boolean,
        type: String
    },

    data() {
        return {
            fields: [
                {
                    label: '综合',
                    value: ''
                },
                {
                    label: '销量',
                    value: 'defNum'
                },
                {
                    label: '价格',
                    value: 'endPrice',
                    order: ''
                }
            ],
            prop: ''
        };
    },

    methods: {
        changeOrder(item) {
            if (item.order !== undefined) {
                this.prop = item.value;

                if (!item.order) {
                    item.order = 'asc';
                } else if (item.order == 'asc') {
                    item.order = 'desc';
                } else if (item.order == 'desc') {
                    item.order = '';
                    this.prop = '';
                }
            } else {
                this.prop = this.prop == item.value ? '' : item.value;
            }

            this.fields.map(e => {
                if (e.order !== undefined) {
                    e.order = e.value == item.value ? e.order : '';
                }
            });

            let params = {
                order: '',
                prop: ''
            };

            if (this.prop) {
                params = {
                    order: item.order,
                    prop: item.value
                };

                if (params.prop && params.order) {
                } else if (params.prop && params.order === undefined) {
                    params.order = 'desc';
                }
            }

            this.$emit('sort-change', params);
        },

        reset() {
            this.fields = [
                {
                    label: '综合',
                    value: ''
                },
                {
                    label: '销量',
                    value: 'defNum'
                },
                {
                    label: '价格',
                    value: 'endPrice',
                    order: ''
                }
            ];

            this.prop = '';
        }
    }
};
</script>

<style lang="scss" scoped>
.filter-bar {
    display: flex;
    align-items: center;
    height: 80rpx;
    font-size: 26rpx;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #eee;
    background-color: #fff;
    box-sizing: border-box;
    position: relative;

    &.is-sticky {
        position: sticky;
        top: 0;
        z-index: 999;
    }

    &-sort {
        display: flex;
        flex: 1;

        &__field {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 50rpx;
            flex: 1;
            color: #727272;

            &.is-active {
                .filter-bar-sort__label {
                    color: $uni-color-primary;
                }
            }
        }

        &__label {
            margin-right: 10rpx;
        }

        &__order {
            display: flex;
            flex-direction: column;

            &.is-asc {
                .filter-bar-sort__asc {
                    border-bottom-color: $uni-color-primary;
                }
            }

            &.is-desc {
                .filter-bar-sort__desc {
                    border-top-color: $uni-color-primary;
                }
            }
        }

        &__asc,
        &__desc {
            margin: 2rpx 0;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-radius: 6rpx;
        }

        &__asc {
            border-bottom-color: #ccc;
        }

        &__desc {
            border-top-color: #ccc;
        }
    }
}
</style>
